<template>
    <section class="companies">
        <!-- 标题区域 -->
        <div class="companies__header">
            <h2 class="companies__title">西宁生态文旅·数字视界中心</h2>
            <p class="companies__subtitle">西宁市文化旅游产业融合发展创意基地</p>
        </div>

        <!-- 加载状态 - 骨架屏 -->
        <div v-if="loading" class="companies__grid">
            <CompanyCardSkeleton v-for="i in 8" :key="`skeleton-${i}`" />
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="companies__error">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            <p class="companies__error-message">{{ error }}</p>
            <button class="companies__retry-button" @click="handleRetry">重试</button>
        </div>

        <!-- 企业网格容器 -->
        <TransitionGroup 
            v-if="companies.length > 0" 
            name="fade-in-up" 
            tag="div" 
            class="companies__grid"
            appear
        >
            <CompanyCard 
                v-for="(company, index) in companies" 
                :key="company.id" 
                :company="company"
                :style="{ '--animation-delay': `${index * 0.05}s` }"
                @click="handleCardClick" 
            />
        </TransitionGroup>

        <!-- 空状态 -->
        <div v-else class="companies__empty">
            <p>暂无企业数据</p>
        </div>

        <!-- 企业详情弹窗 -->
        <CompanyModal :company="selectedCompany" :visible="modalVisible" @close="handleModalClose" />
    </section>
</template>

<script setup>
import { ref } from 'vue';
import CompanyCard from '../ui/CompanyCard.vue';
import CompanyCardSkeleton from '../ui/CompanyCardSkeleton.vue';
import CompanyModal from '../ui/CompanyModal.vue';

const props = defineProps({
    companies: {
        type: Array,
        required: true,
        default: () => []
    },
    columns: {
        type: Object,
        default: () => ({
            desktop: 4,
            tablet: 2,
            mobile: 1
        })
    },
    loading: {
        type: Boolean,
        default: false
    },
    error: {
        type: String,
        default: null
    }
});

const emit = defineEmits(['card-click', 'retry']);

// 弹窗状态管理
const selectedCompany = ref(null);
const modalVisible = ref(false);

// 处理卡片点击
const handleCardClick = (company) => {
    try {
        selectedCompany.value = company;
        modalVisible.value = true;
        emit('card-click', company);
    } catch (err) {
        console.error('Error opening company details:', err);
    }
};

// 处理弹窗关闭
const handleModalClose = () => {
    modalVisible.value = false;
    // 延迟清空数据，等待动画完成
    setTimeout(() => {
        selectedCompany.value = null;
    }, 300);
};

// 处理重试
const handleRetry = () => {
    emit('retry');
};
</script>

<style scoped>
.companies {
    padding: var(--spacing-2xl) var(--spacing-lg);
    background-color: transparent;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}

/* 标题区域 */
.companies__header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.companies__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: #4dd0e1;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: var(--line-height-tight);
    text-shadow: 0 0 10px rgba(77, 208, 225, 0.5), 0 0 20px rgba(77, 208, 225, 0.3);
    letter-spacing: 2px;
}

.companies__subtitle {
    font-size: var(--font-size-base);
    color: #80deea;
    margin: 0;
    line-height: var(--line-height-normal);
    text-shadow: 0 0 8px rgba(128, 222, 234, 0.4);
    letter-spacing: 1px;
}

/* 响应式网格容器 */
.companies__grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
}

/* 平板设备 - 2列 */
@media (max-width: 1024px) {
    .companies__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .companies__title {
        font-size: var(--font-size-3xl);
    }

    .companies__subtitle {
        font-size: var(--font-size-base);
    }
}

/* 移动设备 - 1列 */
@media (max-width: 768px) {
    .companies {
        padding: var(--spacing-3xl) var(--spacing-md);
    }

    .companies__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .companies__header {
        margin-bottom: var(--spacing-2xl);
    }

    .companies__title {
        font-size: var(--font-size-2xl);
    }

    .companies__subtitle {
        font-size: var(--font-size-sm);
    }
}

/* 加载状态 */
.companies__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl) var(--spacing-lg);
    color: var(--neutral-gray);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--neutral-bg);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 错误状态 */
.companies__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl) var(--spacing-lg);
    color: #80deea;
}

.companies__error svg {
    color: #4dd0e1;
    margin-bottom: var(--spacing-md);
}

.companies__error-message {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
    color: #80deea;
}

.companies__retry-button {
    padding: var(--spacing-sm) var(--spacing-xl);
    background: rgba(77, 208, 225, 0.2);
    color: #4dd0e1;
    border: 1px solid #4dd0e1;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.companies__retry-button:hover {
    background: rgba(77, 208, 225, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(77, 208, 225, 0.5);
}

.companies__retry-button:active {
    transform: translateY(0);
}

/* 空状态 */
.companies__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4xl) var(--spacing-lg);
    color: #80deea;
    font-size: var(--font-size-lg);
}

/* 淡入上移动画 */
.fade-in-up-enter-active {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--animation-delay, 0s);
}

.fade-in-up-enter-from {
    opacity: 0;
    transform: translateY(30px);
}

.fade-in-up-enter-to {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up-leave-active {
    transition: all 0.3s ease;
}

.fade-in-up-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
</style>
